import React, { Component } from 'react';
import CommentsLi from "./CommentsLi.js";
import { connect } from 'react-redux';
import {addToCart} from '../actions/cart';

class Detail extends Component {
    constructor(props, context) {
        super(props)
        this.state = {
            comments: [],
            product :{}
        }
        this.addNum = this.addNum.bind(this);
        this.minuNum = this.minuNum.bind(this);
      }
    getComment(){
        var params = this.props.match.params;
        fetch("/api/comments/list",{
            method:"POST" ,
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
              },
            body: `cateId=5aa7bce4c6c26246c378705d&rows=10&productId=${params.id}`
        }).then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                comments:data
              })
        })
    }
    getDatail(){
        var params = this.props.match.params;
        fetch(`/api/products/data/${params.id}`).then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                product:data
              })
        })
    }
    addToCart(item){
        var item = this.state.product;
        item.quantity = this.refs.quantity.value;
        this.props.addToCart(item);
    }
    addNum(){
        this.refs.quantity && this.refs.quantity.value++;
    }
    minuNum(){
        if(this.refs.quantity && this.refs.quantity.valu==1) return;
        this.refs.quantity && this.refs.quantity.value--;
    }
    componentDidMount(){
        this.getComment();
        this.getDatail();
    }
    render() {
        var product = this.state.product;
        return (
          <div>
              <div className="proTopDiv">
                  <div className="leftDiv">
                      <div className="proviewbox">
                          <div className="probigshow">
                            <a className="a_probigshow" href="#" id="daimg" ref="images/201509/goods_img/83_P_1441910861386.jpg"><img src={product.img} className="js_goods_image_url" width="420" height="420"/></a>
                            <div className="zoomplepopup" style={{width: '171.445px',height: '163.242px',left: '249px',top: '73.5px', display: 'none'}}></div>
                            <div id="probig_preview" style={{visibility: 'hidden'}}>
                                  <div className="T_iframe"></div>
                                  <img src={product.img} style={{left: '-607.086px', top: '-179.2px'}} width="1024" height="1024"/>
                              </div>
                          <div className="zoomplepopup" style={{width: '171.445px',height: '163.242px',left: '249px',top: '73.5px', display: 'none'}}></div><div id="probig_preview"><div className="T_iframe"></div><img src={product.img} width="1024" height="1024" alt="" style={{left: '-607.086px', top: '-179.2px'}} /></div></div>
                          <div className="div_prothumb">
                              <div className="thumbporbox">
                                  <ul className="ul_prothumb">

                                                                  <li><a href={product.img} target="_blank"><img longdesc="images/201509/goods_img/83_P_1441910861386.jpg" src={product.img} width="60" height="60"/></a></li>
                                                              </ul>
                              </div>
                              <span className="span_prev span_prevb">prev</span>
                              <span className="span_next span_nextb">next</span>
                          </div>
                      </div>
                  </div>
                  <form  method="post" name="addtocart" id="ECS_FORMBUY">
                  <div className="rightDiv">
                      <div className="rightDivCon">
                          
                          <div className="itemDiv" style={{border:'0'}}>
                              <div>
                                  <div style={{width:'50%',float:'left'}}><h1 className="pro-name">{product.title}</h1></div>
                                  <div style={{width:'50%', float:'left'}}><p className="pro-proid">产品编号：{product._id}</p></div>
                              </div>
                              <div className="pro-slogan">&nbsp;</div>
                          </div>
                          
                          <div className="itemDiv hotitemDiv" style={{border:'0'}}>
                              <div className="itemleft">
                                  <div style={{marginTop:'10px'}}>
                                      <div className="l"><span>市场价</span></div>
                                      <div className="r"> ¥<span className="oprice"><s id="oprice_txt">{product.price+50}</s></span></div>
                                  </div>
                                  <div>
                                      <div className="l"><span>本店价</span></div>
                                      <div className="r" style={{color:'#C40000', fontSize:'14px'}}>¥<span id="price_txt">{product.price}</span></div>
                                  </div>
                              </div>
                              <div className="itemcenter">
                                  <span id="goiphoneapp">去手机购买 <div id="ewmappdiv" style={{display: 'none'}}><img src={product.img} width="120px"/></div></span>
                              </div>
                              <div className="itemright">商品评分：<span id="pro-pj-xing"></span><span className="plcount">（<a href="#pl">共 93 条评论</a>）</span></div>
                          </div>
                          
                          <div className="itemDiv" style={{borderBottom:'0px'}}>
                              <div id="fujiaDiv">
                                                        <div className="pro-item"><label style={{float:'left'}}>蛋糕尺寸：</label>
                                                                      <dd> 
                                      <ol id="fujiaItem" className="fujiali"> 
                                                                                                        <li title="70.00" id="2007" className="selected"><div className="sku"><a title="10寸 ">10寸 </a><s></s></div></li> 
                                                                                                      </ol> 
                                      <div className="clear"></div> 
                                  </dd>
                                                                                                      </div>
                          </div>
                              <div className="itemDiv" style={{borderBottom:'0px'}}>
                                      <div className="pro-item" id="fujiatext"><label>您已选择：<span className="red">10寸 </span></label></div>
                              </div>
                            <div style={{clear:'both' ,marginTop:'20px'}}></div>
                            <span style={{color:'#888',fontSize:'14px'}}>说明：受季节和地域影响，蛋糕装饰原料略有差异，产品及包装请以实物为准</span>
                            
                              <div className="itemDiv cartLine" style={{borderBottom:'0px',position: 'unset'}}>
                                  <div className="pro-item">
                                      <dd style={{lineHeight:'22px',float:'left', width:'auto', marginRight:'50px'}}>
                                          <span className="stock-area">
                                              <div style={{float:'left'}}><input id="quantity" ref="quantity" name="quantity" className="vam text" defaultValue="1" autocomplete="off" type="text"/></div>
                                              <div style={{float:'left'}}>
                                                  <a href="javascript:;"  onClick={this.addNum} className="icon-plus-2 vam" title="加" ><span>+</span></a>
                                                  <a href="javascript:;"  onClick={this.minuNum}  className="icon-minus-2 vam" title="减"><span>-</span></a>
                                              </div>
                                          </span>
                                      </dd>
                                      <a href="javascript:;"  onClick={(e) => this.addToCart(e)}  className="addcarta">加入购物车</a>
                                  </div>
                                  <div className="clear"></div>
                              </div>
                      </div>
                  </div>
              
              <div className="clear"></div>
              </div></form>
          </div>
            <div className="arc_div arc_div_center"    style={{margin: '0 auto',width: '80%'}}>
                    <div className="pl">
                        <ul>
                                {this.state.comments.rows && this.state.comments.rows.map(
                                    (item,index) =>{
                                        return   <CommentsLi data={item} key={index}/>
                                    }
                                )}
                        </ul>
                        </div>
            </div>
</div>
        );
    }
}

const getValue =state=>{
	return {
   
  }
}

const DetailContext = connect(getValue,{addToCart})(Detail);

export default DetailContext;

